<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=3765ed964b2c366b8fd626ae5350798f"></script>
    <style type="text/css">
        html {height: 100%}
        body {height: 99%}
        #iCenter{height: 99%}

    </style>
    <title></title>

    <script>
        var mapObj;
        var buildings;
        var trafficLayer;
        function mapInit(){
            mapObj = new AMap.Map("iCenter",{
                center:new AMap.LngLat(116.397428,39.90923), //地图中心点
                level:13  //地图显示的缩放级别
            });
            //增加各类插件
            //添加地图类型切换插件
            mapObj.plugin(["AMap.MapType"],function(){
                //地图类型切换
                var type1= new AMap.MapType({defaultType:0});//初始状态使用2D地图
                mapObj.addControl(type1);
            });
            //添加比例尺插件
            mapObj.plugin(["AMap.Scale"],function()
            {
                var type2=new AMap.Scale();
                type2.show();
                mapObj.addControl(type2);
            });
            //添加鹰眼

            mapObj.plugin(["AMap.OverView"],function(){
                //加载鹰眼
                overView = new AMap.OverView({
                    //  tileLayer:mapObj,
                    visible:true //初始化显示鹰眼
                    //   isOpen:tru
                });

                mapObj.addControl(overView);
            });
            //在地图中添加ToolBar插件
            mapObj.plugin(["AMap.ToolBar"],function(){
                toolBar = new AMap.ToolBar({
                    ruler:true, //标尺是否可见，默认为true
                    direction:true,//方向盘，默认为true
                    autoPosition:false //自动定位到当前区域,默认为false，要支持html5的浏览器才支持
                });
                mapObj.addControl(toolBar);
            });
        }

        function show3d()
        {
            buildings = new AMap.Buildings(); //实例化3D楼块图层
            buildings.setMap(mapObj);//在map中添加3D楼块图层
            mapObj.addControl(buildings);
        }
        function noshow3d()
        {
            mapObj.removeControl(buildings);


        }
        //显示路网
        function addRoadNetLayer(){
            roadNetLayer = new AMap.TileLayer.RoadNet({zIndex:10}); //实例化路网图层
            roadNetLayer.setMap(mapObj); //在map中添加路网图层
        }

        //显示实时交通路况 只有部分城市支持，南昌没有
        function addTraffic(){
            trafficLayer = new AMap.TileLayer.Traffic(); //实时路况图层
            trafficLayer.setMap(mapObj);
        }

        function unTraffic()
        {
            mapObj.removeControl(trafficLayer);

        }
    </script>
</head>
<body onload="mapInit()">
<input type="button"  value="显示3D图层" onclick="show3d()">
<input type="button" value="不显示 3D图层" onclick="noshow3d()">
<input type="button" value="显示路网" onclick="addRoadNetLayer()">
<input type="button" value="显示路况" onclick="addTraffic()">
<input type="button" value="隐藏路况" onclick="unTraffic()">


<div id="iCenter" ></div>
</body>
</html>